<template>
  <div class="orderItemDetail">
    <div class="wrap">
      <div class="hd" v-show="!loading">
        <p class="position">{{obj.viloation_location}}</p>
        <p class="desc">{{obj.viloation_detail}}</p>
        <p class="cont">
          <span class="time">{{obj.violation_time}}</span>
          <span class="money">金额:￥{{obj.fine_fee}}</span>
        </p>
      </div>
      <div class="bd">
        <div class="item">
            <div class="cell">
                <span class="k">联系人</span>
                <span class="v">{{obj.principal}}</span>
            </div>
            <div class="cell">
             <span class="k">手机号</span>
             <span class="v">{{obj.principal_phone}}</span>
           </div>
         </div>
        <div class="item">
          <div class="cell">
            <span class="k">违章类型</span>
            <span class="v">电子监控</span>
          </div>
          <div class="cell">
            <span class="k">文书编号</span>
            <span class="v">{{obj.wsh}}</span>
          </div>
        </div>
        <div class="item" style="border-bottom:1px solid #eee">
          <div class="cell">
            <span class="k">订单编号</span>
            <span class="v">{{obj.violation_id}}</span>
          </div>
          <div class="cell" style="border-bottom:none">
            <span class="k">下单时间</span>
            <span class="v">{{obj.create_time | timeFilter}}</span>
          </div>
        </div>
        <div class="item">
          <div class="cell cell1" style="border-bottom:none">
            <span class="k">{{obj.status | statusFilter}}</span>
            <span class="v">
                <span>金额: ￥{{obj.total_amount}}</span>
                <span>(含手续费及其他￥{{obj.total_amount-obj.fine_fee}})</span>
            </span>
          </div>
        </div>
      </div>
      <div class="ft">
         <div class="fth">订单跟踪</div>
         <div class="track-rcol">
            <div class="track-list">
              <ul>
                <li  v-if="obj.status === -2 || obj.status === -1 || obj.status === 0 || obj.status === 1 || obj.status === 2 ">
                  <i class="node-icon"></i>
                  <span class="txt">待付款</span>
                  <span class="time">{{obj.create_time | timeFilter}}</span>
                </li>
                <li  v-if="obj.status === -1 || obj.status === 0 || obj.status === 1 || obj.status === 2 ">
                  <i class="node-icon"></i>
                  <span class="txt">已付款</span>
                  <span class="time">{{obj.pay_time | timeFilter}}</span>
                </li>
                <li v-if="obj.status === 0 || obj.status === 1 || obj.status === 2 ">
                  <i class="node-icon"></i>
                  <span class="txt">已经接受，正在处理</span>
                  <span class="time">{{obj.handling_time}}</span>
                </li>
                <li v-if="obj.status === 1 || obj.status === 2 ">
                  <i class="node-icon"></i>
                  <span class="txt">办理成功</span>
                  <span class="time">{{obj.end_time}}</span>
                </li>
                <li v-if="obj.status === 2">
                  <i class="node-icon"></i>
                  <span class="txt">办理失败，已经退款</span>
                  <span class="time">{{obj.end_time}}</span>
                </li>
              </ul>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>
<script>
  import * as API from '../assets/js/API.js'
  import Loading from '../components/Loading.vue'
  export default {
    components: {
      Loading
    },
    data () {
      return {
        access_token: window.localStorage.getItem('accessToken'),
        openid: window.localStorage.getItem('openid'),
        orderNo: this.$route.params.orderNo,
        itemId: this.$route.params.itemId,
        loading: true, // 加载框
        obj: {}
      }
    },
    created () {
      this.orderItemDetail()
    },
    methods: {
      orderItemDetail () {
        let param = {
          openId: this.openid,
          itemId: this.itemId,
          orderNo: this.orderNo
        }
        this.$http.post(API.OrderItemDetail, {access_token: this.access_token, param: JSON.stringify(param)}).then(
          (resp) => {
            let msg = resp.body.msg
            let data = resp.body.data
            this.loading = false
            if (msg === 'OK') {
              this.obj = data
            } else {
              this.$Message.info(msg)
            }
          }
        )
      }
    },
    filters: {
      timeFilter (v) {
        if (!v) return
        var now = new Date()
        now.setTime(v)
        let y = now.getFullYear()
        let m = now.getMonth() + 1
        let d = now.getDate()
        let h = now.getHours()
        let mm = now.getMinutes()
        let s = now.getSeconds()
        return y + '-' + (m < 10 ? '0' + m : m) + '-' +
         (d < 10 ? '0' + d : d) + '   ' + (h < 10 ? '0' + h : h) + ':' + (mm < 10 ? '0' + mm : mm) + ':' + (s < 10 ? '0' + s : s)
      },
      statusFilter (v) {
        if (v === -2) {
          return '待付款'
        } else if (v === -1) {
          return '已付款'
        } else if (v === 0) {
          return '已经接受，正在处理'
        } else if (v === 1) {
          return '已经接受，正在处理'
        } else {
          return '办理失败，已退款'
        }
      }
    }
  }
</script>
<style lang="scss">
  @import '../assets/style/common.scss';
  .orderItemDetail {
    padding-top: px2rem(20px);
    font-size: px2rem(24px);
    .wrap {
      > .hd {
        padding-top: px2rem(10px);
        background-color: #fff;
        /*height: px2rem(200px);*/
        /*border-bottom: 1px solid #eee;*/
        p {
          /*height: px2rem(30px);*/
          line-height: px2rem(30px);
          margin: px2rem(15px) px2rem(20px);
          font-size: px2rem(24px);
        }
        .position {
          font-size: px2rem(26px);
          color: #35b41c;
        }
        .desc {
          /*height: px2rem(60px);*/
        }
        .cont {
          &:after {
            position: relative;
            display: block;
            content: "";
            margin-top: px2rem(20px);
            border-bottom: 1px solid #eee;
          }
          .money {
            float: right;
            margin-right: px2rem(20px);
            color: red;
          }
        }

      }
      > .bd {
        background-color: #fff;
        .item {
          width: 100%;
          /*border-bottom: 1px solid #eee;*/
          padding: px2rem(10px) px2rem(20px);
          .cell {
            height: px2rem(50px);
            line-height: px2rem(50px);
            &:last-child {
              border-bottom: 1px solid #eee;
            }
            .k {

            }
            .v {
              float: right;
              margin-right: px2rem(20px);
              text-align: right;
              span {
                display: block;
              }

            }
          }
          .cell1 {
            height: px2rem(100px);
          }
        }
      }
      > .ft {
        margin-top: px2rem(30px);
        /*padding: px2rem(30px) 0;*/
        background-color: #fff;
        /*text-align: center;*/
        position: absolute;
        width: 100%;
        padding-bottom: px2rem(30px);
        .fth {
          /*margin: px2rem(10px);*/
          height: px2rem(50px);
          line-height: px2rem(50px);
          width: 100%;
          display: block;
          text-align: center;
        }
        .track-rcol {
          margin-top: px2rem(10px);
          .track-list {
            padding: px2rem(8px);
            position: relative;
            margin: 0 auto;
            width: px2rem(300px);
            li {
              position: relative;
              padding: 9px 0 0 25px;
              line-height: 18px;
              border-left: 1px solid #d9d9d9;
              color: #999;
              .node-icon {
                position: absolute;
                left: -6px;
                top: 50%;
                width: 11px;
                height: 11px;
                background: url(../assets/image/order-icons.png)  -21px -72px no-repeat;
              }
              .time {
                margin-right: 20px;
                position: relative;
                top: 4px;
                display: block;
                vertical-align: middle;
                line-height: 25px;
                font-size: 10px;
              }
              .txt {
                max-width: 600px;
                position: relative;
                top: 4px;
                display: inline-block;
                vertical-align: middle;
              }
            }
          }
        }
      }
    }
  }
</style>
